<template>
<!-- 修改弹窗组件 -->
  <div>
    <!-- 头部 -->
    <header>
      <van-row class="headerBox">
        <van-col offset="2" span="6" class="imgBox">
          <van-image width="100" height="100"  src="#" />
        </van-col>
        <van-col span="16" >
          <van-row>
            <van-col offset="1" span="19" class="fontSizeB">
              黑美人西瓜鲜美多汁2个起卖
            </van-col>
            <van-col span="2" @click="exit"> </van-col>
          </van-row>
          <van-row>
            <van-col offset="1" span="4" class="fontSizeS">￥38.8</van-col>
            <van-col span="10" class="fontSizeSX">（2个以上）</van-col>
          </van-row>
          <van-row>
            <van-col offset="1" span="4" class="fontSizeS">￥28.8</van-col>
            <van-col span="10" class="fontSizeSX">（20个以上）</van-col>
          </van-row>
        </van-col>
      </van-row>
    </header>
    <section class="infoBoxM"></section>
    <!-- info -->
    <section>
      <van-row class="infoBox">
        <van-col offset="1" span="12">
          <van-row>
            <van-col span="24">独立包装（1个装）</van-col>
          </van-row>
          <van-row class="fontSizeSX">
            <van-col span="12">￥38.88/个</van-col>
            <van-col span="12">库存：99999</van-col>
          </van-row>
        </van-col>
        <van-col offset="2" span="8">
          <van-stepper v-model="value" input-width="50px" button-size="35px" />
        </van-col>
      </van-row>
    </section>
    <section>
      <van-row class="infoBox">
        <van-col offset="1" span="12">
          <van-row>
            <van-col span="24">独立包装（1个装）</van-col>
          </van-row>
          <van-row class="fontSizeSX">
            <van-col span="12">￥38.88/个</van-col>
            <van-col span="12">库存：99999</van-col>
          </van-row>
        </van-col>
        <van-col offset="2" span="8">
          <van-stepper v-model="value" input-width="50px" button-size="35px" />
        </van-col>
      </van-row>
    </section>
    <section>
      <van-row class="infoBox">
        <van-col offset="1" span="12">
          <van-row>
            <van-col span="24">独立包装（1个装）</van-col>
          </van-row>
          <van-row class="fontSizeSX">
            <van-col span="12">￥38.88/个</van-col>
            <van-col span="12">库存：99999</van-col>
          </van-row>
        </van-col>
        <van-col offset="2" span="8">
          <van-stepper v-model="value" input-width="50px" button-size="35px" />
        </van-col>
      </van-row>
    </section>
    
    <section class="sectionX"></section>
    <footer>
      <van-row class="footerBox">
        <van-col offset="1" span="12">
          <van-row class="">
            <van-col>商品小计</van-col>
          </van-row>
          <van-row class="fontSizeS">
            <van-col>￥116.55</van-col>
          </van-row>
        </van-col>
        <van-col offset="5" span="5">
          <van-button type="primary">确定</van-button>
        </van-col>
      </van-row>
    </footer>
  </div>
</template>

<script>

export default {
  data() {
    return {
      value: 1,
    };
  },
  methods: {
    exit() {
    },
  },
};
</script>

<style>
.headerBox {
  width: 100%;
  height: 80px;
}

.fontSizeB {
  padding-top: 15px;
  font-size: 15px;
  font-weight: 600;
}
.fontSizeS {
  font-size: 15px;
  font-weight: 600;
  color: red;
}
.fontSizeSX {
  font-size: 15px;
  color: rgb(104, 100, 100);
}
.infoBoxM {
  margin-top: 30px;
}
.infoBox {
  margin-top: 5px;
  padding: 5px 0 0 0;
   border-top: 1px solid #000;
}
.footerBox {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 10px;
  background-color: #f2f2f2;
 
}
.sectionX {
  margin-bottom: 70px;
}
</style>